<template>
  <div id="unitManagement">
    <div class="pageHead">
      <el-form :model="form" class="left">
        <el-form-item>
          <el-input placeholder="单位名称/纳税人识别号" v-model="keyWord"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="主管税务所" v-model="taxOffice"></el-input>
        </el-form-item>
        <el-button type="primary" @click="onSearch" :loading="loading">查询</el-button>
      </el-form>
      <div class="right">
        <el-button type="primary" @click="dialogVisible = true">关联部门</el-button>
        <el-dropdown @command="handleCommand">
          <el-button type="primary"> 更多菜单<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">更新单位</el-dropdown-item>
            <el-dropdown-item command="2">更新三方协议</el-dropdown-item>
            <el-dropdown-item command="3">导入个税密码</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="pageMain">
      <el-table :data="rows" height="100%">
        <el-table-column label="序号">
          <template slot-scope="{ row }">
            <el-checkbox>{{ row.num }}</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="companyName" label="单位名称"></el-table-column>
        <el-table-column prop="taxNumber" label="纳税人识别号" />
        <el-table-column prop="taxOffice" label="主管税务所（科、分局）" />
        <el-table-column prop="otherBank" label="三方协议银行" />
        <el-table-column prop="bankNumber" label="银行账号" />
        <el-table-column prop="legalPerson" label="法定代表人" min-width="50"></el-table-column>
        <el-table-column prop="address" label="单位地址"></el-table-column>
        <el-table-column prop="taxPassword" label="个税登录密码"></el-table-column>
      </el-table>
    </div>
    <el-dialog title="关联部门" :visible.sync="dialogVisible" width="35%" :before-close="handleClose">
      <span>注:组织架构与税务所关联绑定后，组织架构下的人员即可进行个税操作。</span>
      <div class="header">
        <h3>北京xxx信息科技有限公司</h3>
        <div>北京市海淀区中关村税务一局</div>
      </div>
      <div class="relation">
        <el-form class="left">
          <el-form-item label="关联公司名称">
            <el-select v-model="relationDepartment.CompanyId">
              <el-option value="北京xxx信息科技有限公司">北京xxx信息科技有限公司</el-option>
              <el-option value="武汉xxx信息科技有限公司">武汉xxx信息科技有限公司</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="适  用  范   围">
            <el-select v-model="relationDepartment.Range">
              <el-option value="财务部">财务部</el-option>
              <el-option value="系统管理部">系统管理部</el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" style="margin-right:15px;">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="个税密码导入" :visible.sync="dialogVisibleImport" width="30%" :before-close="handleCloseImport">
      <div class="taxPasswordImport" style="height:100px">
        <el-input disabled placeholder="请选择文件" v-model="file.name"></el-input>
        <el-upload :show-file-list="false" class="upload-demo" :on-change="handleChange">
          <el-button size="small" type="default">浏览文件</el-button>
        </el-upload>
        <a>下载模板</a>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleImport = false" style="margin-right:15px;">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleImport = false">导 入</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "unitManagement",
  data() {
    return {
      //查询条件
      Query: {
        keyWord: "",
        taxOffice: ""
      },
      rows: [
      ],
      //关联部门
      dialogVisible: false,
      //导入个税密码
      dialogVisibleImport: false,
      //文件信息
      file: {},
      //关联部门相关数据
      relationDepartment: {

      }
    };
  },
  created() {},
  methods: {
    //更多菜单点击
    handleCommand(e) {
      console.log(e);
      //导入个税密码
      if (e == 3) {
        this.dialogVisibleImport = true;
      }
    },
    //关联部门弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    //个税密码导入弹窗
    handleCloseImport() {
      this.dialogVisibleImport = false;
    },
    //上传文件监听
    handleChange(file) {
      console.log(file);
      this.file = file;
    }
  }
};
</script>

<style lang="less" scoped>
#unitManagement {
  .pageHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left,
    .right {
      display: flex;
      align-items: center;
      .el-form-item {
        margin-bottom: 0;
      }
      .el-button {
        margin-right: 8px;
      }
    }
  }
  .el-form {
    .el-form-item {
      margin-right: 20px;
    }
  }

  .el-button {
    margin-left: 0;
  }
}
.taxPasswordImport {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  .el-input {
    width: 50%;
  }
  a {
    color: skyblue;
    margin-left: 12px;
  }
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  h3 {
    font-weight: 900;
  }
  div {
    align-self: end;
  }
}
.relation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    // align-items: center;
    flex-flow: column;
    align-items: flex-start;
    .el-form-item {
      margin-bottom: 0;
    }
    .el-button {
      margin-right: 8px;
    }
  }
}
.el-form {
  align-items: flex-end;
  width: 100%;
  .el-form-item {
    margin-right: 20px;
    display: flex;
    .el-form-item__label {
      white-space: pre-wrap;
    }
  }
}
</style>
